<template>
  <div id="app">
    <!-- 使用state -->
    <h1>使用state</h1>
    <div>原始形式state：{{ $store.state.count }}</div>
    <div>计算属性形式：{{ count }}</div>
    <div>辅助函数形式：{{ count }}</div>
    <!-- 使用mutation -->
    <div>---------------------------------------------------------</div>
    <h1>使用mutation</h1>
    <div><button @click="countAdd">原始形式的mutation：+1</button></div>
    <div><button @click="countAdd2(10)">原始形式的mutation：+10</button></div>
    <div><button @click="addCount">辅助函数形式的mutation：+1</button></div>
    <div><button @click="addCount2(100)">辅助函数形式的mutation：+100</button></div>
    <!-- 使用action -->
    <div>---------------------------------------------------------</div>
    <h1>使用action</h1>
    <div><button @click="action">原始形式的action：+1</button></div>
    <div><button @click="action2">原始形式的action：+100</button></div>
    <div><button @click="getAsyncCount">辅助函数形式的action：+1</button></div>
    <div><button @click="getAsyncCount2(200)">辅助函数形式的action：+200</button></div>
    <!-- 使用getters -->
    <div>---------------------------------------------------------</div>
    <h1>使用getters</h1>
    <div>原始形式的getters：{{ $store.getters.filterList }}</div>
    <div>辅助函数形式的getters：{{ filterList }}</div>
    <!-- 使用moudles -->
    <div>---------------------------------------------------------</div>
    <h1>使用modules</h1>
    <div>用户token：{{ $store.state.user.token }}</div>
    <div>应用名称：{{ $store.state.setting.name }}</div>
    <div>使用getters访问__用户token：{{ token }}</div>
    <div>使用getters访问__应用名称：{{ name }}</div>
  </div>
</template>

<script>
// 1.先引入
// import { mapState } from 'vuex'
// import { mapMutations } from 'vuex'
// import { mapActions } from 'vuex'
// import { mapGetters } from 'vuex'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'App',
  computed: {
    // count() {
    //   return this.$store.state.count
    // }

    // 2.采用数组形式引入
    // mapState(['count'])

    // 3.使用 延展运算符 将导出的状态映射给计算属性
    ...mapState(['count']),
    ...mapGetters(['filterList']),
    ...mapGetters(['token', 'name']),
  },
  methods: {
    countAdd() {
      // commit(type: string, payload?: any, options?: CommitOptions)
      // type： mutation中的方法名。调用的是哪个一个mutation方法
      // payload: 传递的参数。实际参数。
      this.$store.commit("addCount")
    },
    countAdd2(num) {
      this.$store.commit("addCount2", num)
    },

    // 使用方法类似与state的辅助函数
    ...mapMutations(['addCount', 'addCount2']),

    action() {
      // dispatch调用action
      this.$store.dispatch("getAsyncCount")
    },
    action2() {
      this.$store.dispatch("getAsyncCount2", 100)
    },

    ...mapActions(['getAsyncCount', 'getAsyncCount2']),
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
